﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Check Out Order</title>
    <link href="../Content/CommonStyle.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.tmpl.js" type="text/javascript"></script>
    <script src="../Scripts/ViewsJS/Checkout.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.validationEngine-en.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.validationEngine.js" type="text/javascript"></script>
    <link href="../Content/template.css" rel="stylesheet" type="text/css" />
    <link href="../Content/validationEngine.jquery.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="divMain">
        <div id="divMenu" style="background-color: Gray; width: 100%; color:White; margin-bottom:10px;">
            <table id="tblLogin">
                <tr>
                    <td>
                        Customer ID :
                    </td>
                    <td>
                        <input type="text" id="txtUserID" />
                    </td>
                    <td>
                        Password :
                    </td>
                    <td>
                        <input type="password" id="pwdPassword" />
                    </td>
                    <td>
                        <a href="#" class="Login" title="Sign in">Login</a>
                    </td>
                    <td>
                        Not a customer <a href="#" title="Register for a new account" onclick="RegisterNewCustomer();">Register</a> here
                    </td>
                </tr>
            </table>
            <table id="tblLogout" style="display: none;">
                <tr>
                    <td>
                        !!! Welcome
                    </td>
                    <td>
                        <label id="lblName" />
                    </td>
                    <td>
                        !!!
                    </td>
                    <td>
                        <a href="Products.htm" title="Logout" onclick="ClearForm();">Logout</a>
                    </td>
                </tr>
            </table>
        </div>
        <form method="post" id="customerInformation" style="display: none">
            <fieldset>
            <legend>Customer Information :</legend>
            <table style="width: 100%;">
                <tr>
                    <td style="width: 15%;">
                        Customer ID
                    </td>
                    <td style="width: 15%;">
                        <input id="txtCustomerID" type="text" readonly="readonly" name="CustomerID" value="0" />
                    </td>
                    <td style="width: 15%;">
                        Password
                    </td>
                    <td style="width: 15%;">
                        <input id="txtPassword" class="validate[required,maxSize[50]] text-input" type="password" name="Password" />
                    </td>
                    <td style="width: 15%;">
                        Confirm Password
                    </td>
                    <td style="width: 15%;">
                        <input id="txtConfirmPassword" class="validate[required,equals[txtPassword],maxSize[50]] text-input" type="password" name="ConfirmPassword" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Title
                    </td>
                    <td>
                        <input id="txtTitle" class="validate[optional,maxSize[8]] text-input" type="text" name="Title" />
                    </td>
                    <td>
                        Suffix
                    </td>
                    <td>
                        <input id="txtSuffix" class="validate[optional,maxSize[10]] text-input" type="text" name="Suffix" />
                    </td>
                </tr>
                <tr>
                    <td>
                        First Name
                    </td>
                    <td>
                        <input id="txtFirstName" class="validate[required,maxSize[50]] text-input" type="text" name="FirstName" />
                    </td>
                    <td>
                        Middle Name
                    </td>
                    <td>
                        <input id="txtMiddleName" class="validate[optional,maxSize[50]] text-input" type="text" name="MiddleName" />
                    </td>
                    <td>
                        Last Name
                    </td>
                    <td>
                        <input id="txtLastName" class="validate[required,maxSize[50]] text-input" type="text" name="LastName" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Phone
                    </td>
                    <td>
                        <input id="txtPhone" class="validate[optional,maxSize[25]] text-input" type="text" name="Phone" />
                    </td>
                    <td>
                        Company Name
                    </td>
                    <td>
                        <input id="txtCompanyName" class="validate[optional,maxSize[128]] text-input" type="text" name="CompanyName" />
                    </td>
                    <td>
                        Email Address
                    </td>
                    <td>
                        <input id="txtEmailAddress" class="validate[optional,maxSize[50]] text-input" type="text" name="EmailAddress" />
                    </td>
                </tr>
                </table>
        </fieldset>
            <fieldset>
            <legend>Billing Address :</legend>
                <table style="width: 100%;">
                <tr>
                    <td style="width: 15%;">
                        Address Line1
                    </td>
                    <td style="width: 15%;">
                        <input id="txtBAddressLine1" class="validate[required,maxSize[60]] text-input" type="text" name="BillingAddressLine1" />
                    </td>
                    <td style="width: 15%;">
                        Address Line2
                    </td>
                    <td style="width: 15%;">
                        <input id="txtBAddressLine2" class="validate[optional,maxSize[60]] text-input" type="text" name="BillingAddressLine2" />
                    </td>
                    <td style="width: 15%;">
                        City
                    </td>
                    <td style="width: 15%;">
                        <input id="txtBCity" class="validate[required,maxSize[30]] text-input" type="text" name="BillingCity" />
                    </td>
                </tr>
                <tr>
                    <td>
                        State Province
                    </td>
                    <td>
                        <input id="txtBStateProvince" class="validate[required,maxSize[50]] text-input" type="text" name="BillingStateProvince" />
                    </td>
                    <td>
                        Country Region
                    </td>
                    <td>
                        <input id="txtBCountryRegion" class="validate[required,maxSize[50]] text-input" type="text" name="BillingCountryRegion" />
                    </td>
                    <td>
                        Postal Code
                    </td>
                    <td>
                        <input id="txtBPostalCode" class="validate[required,maxSize[15]] text-input" type="text" name="BillingPostalCode" />
                    </td>
                </tr>
                </table>
         </fieldset>
             <fieldset>
            <legend>Shipping Address :</legend>
            <table style="width: 100%;">
                <tr>
                    <td style="width: 15%;">
                        Address Line1
                    </td>
                    <td style="width: 15%;">
                        <input id="txtSAddressLine1" class="validate[required,maxSize[60]] text-input" type="text" name="ShippingAddressLine1" />
                    </td>
                    <td style="width: 15%;">
                        Address Line2
                    </td>
                    <td style="width: 15%;">
                        <input id="txtSAddressLine2" class="validate[optional,maxSize[60]] text-input" type="text" name="ShippingAddressLine2" />
                    </td>
                    <td style="width: 15%;">
                        City
                    </td>
                    <td style="width: 15%;">
                        <input id="txtSCity" class="validate[required,maxSize[30]] text-input" type="text" name="ShippingCity" />
                    </td>
                </tr>
                <tr>
                    <td>
                        State Province
                    </td>
                    <td>
                        <input id="txtSStateProvince" class="validate[required,maxSize[50]] text-input" type="text" name="ShippingStateProvince" />
                    </td>
                    <td>
                        Country Region
                    </td>
                    <td>
                        <input id="txtSCountryRegion" class="validate[required,maxSize[50]] text-input" type="text" name="ShippingCountryRegion" />
                    </td>
                    <td>
                        Postal Code
                    </td>
                    <td>
                        <input id="txtSPostalCode" class="validate[required,maxSize[15]] text-input" type="text" name="ShippingPostalCode" />
                    </td>
                </tr>
            </table>
         </fieldset>
            <input type="button" id="btnsubmitOrder" value="submit order" />
            <input type="submit" id="btnRegister" value="Register" />
            <input type="reset" id="btnReset" value="Reset" />
        </form>
    </div>
</body>
</html>
